<template>
    <div >
        <ul class="list">
            <li class="item" v-for="( item, index) of letters" 
            :key="index"
            @click="handleLetterClick"
            @touchstart="handleTouchstar"
            @touchmove="handleTouchmove"
            @touchend="handleTouchEnd"
            :ref="item"
            >{{ item }}</li>
            <!-- <li class="item">A</li>
            <li class="item">A</li>
            <li class="item">A</li>
            <li class="item">A</li> -->
        </ul>       
    </div>
</template>
<script>
export default{
    name:'CityAlphabet',
    props:{
        ct: {
            type: Object
        }
    },
    created(){
        console.log( this.ct );
    },
    computed: {
        letters () {
            // letters是一个数组，存放键值，ABC...，这样再把它渲染出来
            const letters = []
            // const arr = [];
            // 对象的遍历，返回的是key
            for(let attr in this.ct){
                letters.push( attr );
                // 下面这个是获取到每一项的values
                // arr.push( this.ct[ attr ] );
            }
            return letters
        }
    },
    data () {
        return {
            touchStart : false,
            // letters: []
        }
    },
    methods: {
        handleLetterClick (e) {
            // e.target  target 事件属性可返回事件的目标节点（触发该事件的节点）
            this.$emit('change',e.target.innerText)   
            console.log( this.ct )         
        },
        handleTouchstar () {
            this.touchStart = true
        },           
        handleTouchmove (e) {
            if(this.touchStart){
                // offsetTop操作DOM元素时获取的距顶部的高度
                const startY = this.$refs['A'][0].offsetTop
                // touches[0]当前手指的信息
                const touchY = e.touches[0].clientY- 79
                
                const index = Math.floor((touchY - startY) / 20)
                console.log(letters.lenght)
                if (index >= 0 && index < this.letters.lenght){
                    console.log(touchY)
                    this.$emit('change',this.letters[index])

                }
               
            }
        },
        handleTouchEnd () {
            this.touchStart = false
        }
    }
}
</script>
<style lang= "stylus" scoped>
    @import '~styles/varibles.styl'
    .list
        display :flex
        flex-direction:column
        justify-content:center
        position:absolute
        right: 0 
        top:1.58rem 
        bottom :0rem
        width: .4rem 
        color:$bgColor        
        .item
            text-align:center
            line-height:.4rem

        
</style>